@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;
@use "@/styles/variable.module.scss" as variable;
@use 'sass:map';

:nth-child(n) {
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
  font-family: inherit;
  transition: .3s linear;
  transition-property: background, color, box-shadow, border-color;
}

input {
  height: auto;
  min-height: auto;
  width: 100%;

  .uni-input-input {
    height: auto;
  }
}

.page-paging {
  @each $theme, $theme-map in variable.$themes {
    &[#{$theme}] {
      @each $type, $color-map in $theme-map {
        @each $key, $value in $color-map {
          #{fun.getCssVarName($type, $key)}: #{$value};
        }
      }

      @include ns.b(input) using ($b) {
        background: rgba($color: map.get($theme-map, info, shadowColor), $alpha: 0.3);
      }
      
      @include ns.b(numberbox) using ($b) {
        @include ns.s(controls) using ($s) {
          background: rgba($color: map.get($theme-map, info, shadowColor), $alpha: 0.3);
        }
      }
    }
  }

  font-size: 32rpx;
  line-height: 44rpx;
  color: fun.getCssVarValue(info-textColor);
  background: fun.getCssVarValue(info-backgroundColor);

  image {
    display: block;
  }

  @include ns.b(button) using ($b) {
    @extend :nth-child(n);
    #{fun.getCssVarName($b, borderWidth)}: 4rpx;

    @include ns.b(font) using ($fb) {
      #{fun.getCssVarName($fb, stroke)}: fun.getCssVarValue($b, strokeColor);
      #{fun.getCssVarName($fb, shadow)}: fun.getCssVarValue($b, strokeColor);
    }
  }

  @include ns.b(input) using ($b) {
    font-size: 28rpx;
    line-height: 40rpx;
    border-radius: 8rpx;
    padding: 24rpx 32rpx;

    @include ns.s(disabled) using ($s) {
      background: fun.getCssVarValue(disabled-backgroundColor);
    }
  }

  @include ns.b(numberbox) using ($b) {
    @include ns.s(controls) using ($s) {
      padding: 8rpx;
      font-size: 40rpx;
      line-height: 56rpx;
      border-radius: 1000rpx;

      @include ns.b($b) using ($b) {
        @include ns.e(controls) using ($e) {
          border-radius: inherit;
        }

        @include ns.e(input) using ($e) {
          $p: 8rpx;
          @extend :nth-child(n);
          padding-top: $p;
          padding-bottom: $p;
        }
      }
    }
  }

  @include ns.b(popup) using ($b) {
    & > .l-overlay {
      background: rgba($color: #000000, $alpha: 0.5);
      backdrop-filter: blur(20rpx);
    }
  }
}

rich-text {
  img,
  video,
  audio {
    width: 100%;
  }
}

.iconfont {
  line-height: 100%;
}

.icon-loading,
.use-rotate {
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  animation: rotate 1s linear infinite;
}
